home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Menus CSS / highlight-menu.izs < prev    next >
Text File  |  2005-09-02  |  3KB  |  109 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Highlight menu effect
  4. <!/TITLE>
  5.  
  6. <!BROWSER>FF1+ IE5+<!/BROWSER>
  7.  
  8. <!DESCRIPTION>Add a stylish "highlight" effect to your table menus using this versatile DHTML script. A thin border is applied around the table cell (<td>) in participation as the mouse moves over it, with this effect visible in IE4+ and NS6+. Great and lightweight effect.
  9. <!/DESCRIPTION> 
  10.  
  11. <!CATEGORY>drop down menus - css<!/CATEGORY>
  12.  
  13. <!SCRIPT>
  14. <!-- START OF SCRIPT -->
  15. <!-- Step 1: Insert the following script into the <head> section of your page: -->
  16. <style>
  17. .menulines{
  18. border:1px solid white;
  19. }
  20.  
  21. .menulines a{
  22. text-decoration:none;
  23. color:black;
  24. }
  25. </style>
  26.  
  27. <script language="JavaScript1.2">
  28.  
  29. /*
  30. Highlight menu effect script: By Dynamicdrive.com
  31. For full source, Terms of service, and 100s DTHML scripts
  32. Visit http://www.dynamicdrive.com
  33. */
  34.  
  35. function borderize(what,color){
  36. what.style.borderColor=color
  37. }
  38.  
  39. function borderize_on(e){
  40. if (document.all)
  41. source3=event.srcElement
  42. else if (document.getElementById)
  43. source3=e.target
  44. if (source3.className=="menulines"){
  45. borderize(source3,"black")
  46. }
  47. else{
  48. while(source3.tagName!="TABLE"){
  49. source3=document.getElementById? source3.parentNode : source3.parentElement
  50. if (source3.className=="menulines")
  51. borderize(source3,"black")
  52. }
  53. }
  54. }
  55.  
  56. function borderize_off(e){
  57. if (document.all)
  58. source4=event.srcElement
  59. else if (document.getElementById)
  60. source4=e.target
  61. if (source4.className=="menulines")
  62. borderize(source4,"white")
  63. else{
  64. while(source4.tagName!="TABLE"){
  65. source4=document.getElementById? source4.parentNode : source4.parentElement
  66. if (source4.className=="menulines")
  67. borderize(source4,"white")
  68. }
  69. }
  70. }
  71.  
  72. </script>
  73. <!-- Step 2: Add the below to the <body> of your page. It contains the HTML codes for the menu: -->
  74. <table border="0" width="200" cellspacing="0" cellpadding="0" onMouseover="borderize_on(event)" onMouseout="borderize_off(event)">
  75.  
  76. <tr><td width="100%" bgcolor="#E6E6E6"><font face="Arial" size="3"><b>Main Menu</b></font></td></tr>
  77.  
  78. <tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://wsabstract.com">Website Abstraction</a></font></td></tr>
  79.  
  80. <tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://freewarejava.com">Freewarejava.com</a> </font></td></tr>
  81.  
  82. <tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://wsabstract.com/cgi-bin/Ultimate.cgi">Webmaster Help Forum</a> </font></td></tr>
  83.  
  84. <tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://www.webreview.com">Web Review</a></font></td></tr>
  85.  
  86. <tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://www.builder.com">Builder.com</a> </font></td></tr>
  87.  
  88. </table>
  89. <!-- Configuring the menu 
  90.  
  91. The code of Step 2 illustrates what must be done to a standard table to have the effect applied to its cells. Firstly, have present the onMouseover=... and onMouseout=...code inside the <table> tag itself, as follows:
  92.  
  93. <table onMouseover="borderize_on(event)" onMouseout="borderize_off(event)">
  94.  
  95. Secondly and finally, for each of the table cells (<td>) that you wish the effect to be added to, add the class=... code inside it:
  96.  
  97. <td class="menulines">.......</a>
  98.  -->
  99. <!-- END OF SCRIPT -->
  100. <!/SCRIPT>
  101.  
  102. <!PREVIEW>
  103. <!-- START OF SCRIPT -->
  104.  
  105.  
  106. <!-- END OF SCRIPT -->
  107. <!/PREVIEW>
  108.  
  109. <!RELATED>NONE<!/RELATED>